{{extend name="index/index" /}}

{{block name="mycss"}}
<link rel="stylesheet" href="/static/index/css/dropload.css">
{{/block}}

{{block name="main"}}
<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-1">
            <span class="lead">条件搜索:</span>
        </div>
        <div class="col-md-9">
            <div class="col-md-2">
                <button typr="button" class="btn-success btn btn-default" id="recentlyLogged">最近登录</button>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn-success btn btn-default" id="latestReg">最近注册</button>
            </div>
            <form >
                <div class="col-md-5">
                    <div class="col-md-3 col-md-offset-1">
                        <span class="lead">收入:</span>
                    </div>
                    <div class="col-md-8">
                    <select name="salary" class="form-control" id="salary">
                        <option value="0">3000以下</option>
                        <option value="1">3000-5000</option>
                        <option value="2">5000-8000</option>
                        <option value="3">8000-11000</option>
                        <option value="4">11000-20000</option>
                        <option value="5">20000-30000</option>
                        <option value="6">30000-40000</option>
                        <option value="7">40000-50000</option>
                        <option value="8">50000以上</option>
                    </select>
                    </div>
                </div>

                <div class="col-md-2">
                    <input type="text" placeholder="年龄" class="form-control" name="age" id="age">
                </div>
                <button type="button" class="col-md-1 btn-info btn btn-default" id="search">搜索</button>
            </form>
        </div>
    </div>
    <div class="row addUser">
        <div class="col-md-offset-1"></div>
    </div>
</div>


{{/block}}


{{block name="myjs"}}
<script src="/static/index/js/dropload.min.js"></script>


<script>
    $(function () {
        var counter = 0;
        // 每页展示4个
        var num = 4;
        var pageStart = 0, pageEnd = 0;

        // dropload
        $('.container').dropload({
            scrollArea: window,
            loadDownFn: function (me) {
                $.ajax({
                    type: 'GET',
                    url: '/ajax/',
                    dataType: 'json',
                    success: function (data) {
                        var result = '';
                        counter++;  // 1
                        pageEnd = num * counter; //4
                        pageStart = pageEnd - num; // 0

                        for (var i = pageStart; i < pageEnd; i++) {
                            var nickname = data[i].nickname;
                            var icon = data[i].icon;
                            var birthday = data[i].birthday;
                            if (birthday == null) {
                                birthday = '保密';
                            }
                            result += '<div class="single-member effect-1 col-md-5">' +
                                '<div class="col-md-5">' +
                                '<div class="member-image">' +
                                '<img src="' + icon + '" alt="Member" style="height:120px" modal="zoomImg" >' +
                                '</div>' +
                                '</div>' +
                                '<div class="col-md-7">' +
                                '<div class="member-info">' +
                                '<div class="row">' +
                                '<h3>' + nickname + '</h3>' +
                                '</div>' +
                                '<div class="row">' +
                                '<div class="col-md-5">正在寻找:</div>' +
                                '<div class="col-md-7">' +
                                '<small>上海</small>' +
                                '<small>男士</small>' +
                                '<small>26-35岁</small>' +
                                '<small>未婚的男士</small>' +
                                '</div>' +
                                '</div>' +
                                '<div class="row">' +
                                '<div class="col-md-4">生日:</div>' +
                                '<div class="lead ">' + birthday + '</div>' +
                                '</div>' +
                                '</div>' +
                                '</div>' +
                                '<div class="social-touch">' +
                                '<a class="icon-trophy icon-2x" href="#"></a>' +
                                '<a class="icon-envelope icon-2x" href="#"></a>' +
                                '<a class="icon-comment icon-2x" href="#"></a>' +
                                '</div>' +
                                '</div>';
                            if ((i + 1) >= data.length) {
                                // 锁定
                                me.lock();
                                // 无数据
                                me.noData();
                                break;
                            }
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function () {
                            $('.addUser').append(result);
                            // 每次数据加载完，必须重置
                            me.resetload();
                        }, 500);
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        });
    });

    // 点击最近注册
    $(function () {
        $('#latestReg').click(function (me) {
            $.ajax({
                type: 'GET',
                url: '/latestReg/',
                dataType: 'json',
                success: function (data) {
                    var result = '';

                    for (var i = 0; i < data.length; i++) {
                        var nickname = data[i].nickname;
                        var icon = data[i].icon;
                        var birthday = data[i].birthday;
                        result += '<div class="single-member effect-1 col-md-5">' +
                            '<div class="col-md-5">' +
                            '<div class="member-image">' +
                            '<img src="' + icon + '" alt="Member" style="height:120px" modal="zoomImg" >' +
                            '</div>' +
                            '</div>' +
                            '<div class="col-md-7">' +
                            '<div class="member-info">' +
                            '<div class="row">' +
                            '<h3>' + nickname + '</h3>' +
                            '</div>' +
                            '<div class="row">' +
                            '<div class="col-md-5">正在寻找:</div>' +
                            '<div class="col-md-7">' +
                            '<small>上海</small>' +
                            '<small>男士</small>' +
                            '<small>26-35岁</small>' +
                            '<small>未婚的男士</small>' +
                            '</div>' +
                            '</div>' +
                            '<div class="row">' +
                            '<div class="col-md-4">生日:</div>' +
                            '<div class="lead ">' + birthday + '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="social-touch">' +
                            '<a class="icon-trophy icon-2x" href="#"></a>' +
                            '<a class="icon-envelope icon-2x" href="#"></a>' +
                            '<a class="icon-comment icon-2x" href="#"></a>' +
                            '</div>' +
                            '</div>';
                    }

                    // 为了测试，延迟1秒加载
                    setTimeout(function () {
                        $('.addUser').empty();
                        $('.addUser').append(result);
                    }, 500);
                },
                error: function () {
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        });
    });


    // 点击最近登录
    $(function () {
        $('#recentlyLogged').click(function () {
            $.ajax({
                type: 'GET',
                url: '/recentlyLogged/',
                dataType: 'json',
                success: function (data) {
                    var result = '';
                    for (var i = 0; i < data.length; i++) {
                        var nickname = data[i].nickname;
                        var icon = data[i].icon;
                        var birthday = data[i].birthday;
                        result += '<div class="single-member effect-1 col-md-5">' +
                            '<div class="col-md-5">' +
                            '<div class="member-image">' +
                            '<img src="' + icon + '" alt="Member" style="height:120px" modal="zoomImg" >' +
                            '</div>' +
                            '</div>' +
                            '<div class="col-md-7">' +
                            '<div class="member-info">' +
                            '<div class="row">' +
                            '<h3>' + nickname + '</h3>' +
                            '</div>' +
                            '<div class="row">' +
                            '<div class="col-md-5">正在寻找:</div>' +
                            '<div class="col-md-7">' +
                            '<small>上海</small>' +
                            '<small>男士</small>' +
                            '<small>26-35岁</small>' +
                            '<small>未婚的男士</small>' +
                            '</div>' +
                            '</div>' +
                            '<div class="row">' +
                            '<div class="col-md-4">生日:</div>' +
                            '<div class="lead ">' + birthday + '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="social-touch">' +
                            '<a class="icon-trophy icon-2x" href="#"></a>' +
                            '<a class="icon-envelope icon-2x" href="#"></a>' +
                            '<a class="icon-comment icon-2x" href="#"></a>' +
                            '</div>' +
                            '</div>';
                    }

                    // 为了测试，延迟1秒加载
                    setTimeout(function () {
                        $('.addUser').empty();
                        $('.addUser').append(result);
                    }, 500);
                },
                error: function () {
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        });
    });

    $(function (){
        $('#search').click(function (){
            var  age = $('#age').val();
            var salary = $('#salary').val();
            if (age.match(/^\d{0,2}$/)==null){
                alert('请填入数字');
                return false;
            }
            data = {
                'age':age,
                'salary':salary,
            };
            commit(data);
        });
    });

    function commit(info){
        $.ajax({
            type: 'get',
            url: '/commit/',
            data: info,
            dataType: 'json',
            success: function (data) {
              if(data.status){
                  var result = '';
                  for (var i = 0; i < data.msg.length; i++) {
                      var nickname = data.msg[i].nickname;
                      var icon = data.msg[i].icon;
                      var birthday = data.msg[i].birthday;
                      result += '<div class="single-member effect-1 col-md-5">' +
                          '<div class="col-md-5">' +
                          '<div class="member-image">' +
                          '<img src="' + icon + '" alt="Member" style="height:120px" modal="zoomImg" >' +
                          '</div>' +
                          '</div>' +
                          '<div class="col-md-7">' +
                          '<div class="member-info">' +
                          '<div class="row">' +
                          '<h3>' + nickname + '</h3>' +
                          '</div>' +
                          '<div class="row">' +
                          '<div class="col-md-5">正在寻找:</div>' +
                          '<div class="col-md-7">' +
                          '<small>上海</small>' +
                          '<small>男士</small>' +
                          '<small>26-35岁</small>' +
                          '<small>未婚的男士</small>' +
                          '</div>' +
                          '</div>' +
                          '<div class="row">' +
                          '<div class="col-md-4">生日:</div>' +
                          '<div class="lead ">' + birthday + '</div>' +
                          '</div>' +
                          '</div>' +
                          '</div>' +
                          '<div class="social-touch">' +
                          '<a class="icon-trophy icon-2x" href="#"></a>' +
                          '<a class="icon-envelope icon-2x" href="#"></a>' +
                          '<a class="icon-comment icon-2x" href="#"></a>' +
                          '</div>' +
                          '</div>';
                  }

                  // 为了测试，延迟1秒加载
                  setTimeout(function () {
                      $('.addUser').empty();
                      $('.addUser').append(result);
                  }, 500);
              } else{
                  alert('暂无数据');
              }
            },
            error: function (){
                alert('ajax请求错误');
            }
        });
    }



</script>
{{/block}}
